﻿<h2>Nested Validation</h2>

<data-ng-form name="parentForm" novalidate>
    <div class="row">
        <div class="form-group" ng-class="{ 'has-error': parentForm.name.$dirty && parentForm.name.$invalid, 'has-success': parentForm.name.$dirty && parentForm.name.$valid }">
            <label class="control-label" for="name">Name</label>

            <input type="text" name="name" data-ng-model="name" class="form-control" placeholder="Enter name..." required />

            <span class="control-label" data-ng-show="parentForm.name.$dirty && parentForm.name.$error.required">required</span>
        </div>
    </div>

    <div class="row">
        <label for="types">Type</label>

        <div class="form-group">
            <label class="control-label radio-inline" ng-repeat="type in types">
                <input class="form-control" type="radio" name="types" value="{{type}}" data-ng-model="$parent.selectedType" /> {{type}}
            </label>

            <p class="help-block">Next controls are dinamically loaded by templates and depends on 'Type' value.</p>
        </div>
    </div>

    <div>
        <data-item-template data-item-model="financeInfo" />
    </div>
    <div class="row">
        <button type="button" class="btn btn-primary" data-ng-click="onSubmit()" data-ng-disabled="(parentForm.$invalid || parentForm.$pristine) || (nestedForm.$invalid || nestedForm.$pristine)">Submit</button>
    </div>
</data-ng-form>

<!--<data-ng-form name="parentForm" id="parentForm" novalidate>
    <div class="row">
        <div class="form-group">
            <label for="name">Name</label>

            <input type="text"
                   name="name"
                   data-ng-model="name"
                   class="form-control"
                   placeholder="Enter name..."
                   required />

            <span class="text-danger"
                  data-ng-show="userInformation.name.$dirty && userInformation.name.$error.required">required</span>
        </div>
    </div>

    <div class="row">
        <label for="types">Type</label>

        <div class="form-group">
            <label class="radio-inline" ng-repeat="type in types">
                <input type="radio" name="types" value="{{type}}" data-ng-model="$parent.selectedType" /> {{type}}
            </label>

            <p class="help-block">Next controls are dinamically loaded by templates and depends on 'Type' value.</p>
        </div>
    </div>

    <div>
        <data-item-template data-item-model="financeInfo" />
    </div>
    <div class="row">
        <button type="button" class="btn btn-primary" data-ng-click="submit()" data-ng-disabled="(parentForm.$invalid || parentForm.$pristine) || (nestedForm.$invalid || nestedForm.$pristine)">Submit</button>
    </div>
</data-ng-form>-->
